import React, { Component } from 'react';
import './06css.scss'
class DemoComment extends Component {
    state = {
        title: '',
        content: '',
        list: [
            {
                title: '评论人：jack',
                content: '评论内容： 沙发！！！'
            }
        ]
    }
    

    updateTitle = (e) => {
        // 从事件对象event中拿到input的值来更新state
        let title = e.target.value
        // 更新state-> setState方法
        this.setState({
            title
        })

    }
    updateContent = (e) => {
        // 从事件对象event中拿到input的值来更新state
        this.setState({
            content: e.target.value
        })
    }

    publish = () => {
        console.log('state', this.state)
        // 组装数据格式/更新list数据
        const { title, content } = this.state
        //第一种方法： 用Es6解构方法生成一个新数组，push新数组，再更新list
        //   let newArr = [...this.state.list]
        //       newArr.push({title, content})
        // 第二种方法：
        let newArr = this.state.list.concat([{ title, content }])
        this.setState({
            list: newArr
        })

    }

    del = (index) => {
        this.state.list.splice(index, 1)
        this.setState({
            list: this.state.list
        })
    }

    render() {
        return (<>
            <h2>05.案例-发表评论</h2>
            <div className='comment'>
                <div className="header">
                    <input value={this.state.title} placeholder='请输入评论人' onChange={this.updateTitle} />
                </div>
                <div className='content'>
                    <textarea value={this.state.content} placeholder='请输入评论内容' rows='5' onChange={this.updateContent} />
                </div>
                <button onClick={this.publish}>发表评论</button>
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item, index) => <li key={index}>
                                <h2>{item.title}</h2>
                                <p>{item.content}</p>
                                <button className='btn-del' onClick={() => this.del(index)}>删除评论</button>
                            </li>)
                        }
                    </ul>
                </div>
                <h2>lable-for</h2>
                <div>
                    {/* 点击label文本选择checkbox */}
                    <input type='checkbox' id='argee' />
                    <label htmlFor='argee'>同意协议</label>
                    {/* 点击label文本选择checkbox */}
                    <label>
                        <input type='checkbox' id='argee' />
                        同意协议
                    </label>
                </div>
            </div></>);
    }
}

export default DemoComment;
